<template>
  <view class="confirm-dialog" v-if="visible" @tap="handleBackdropTap">
    <view class="dialog-content elderly-pressable" @tap.stop>
      <view class="dialog-header">
        <text class="dialog-title elderly-text-large">{{title}}</text>
        <view class="dialog-close elderly-pressable" @tap="handleCancel">
          <text class="close-icon">✕</text>
        </view>
      </view>
      
      <view class="dialog-body">
        <text class="dialog-message elderly-text">{{message}}</text>
        <view class="dialog-details" v-if="details">
          <text class="details-text elderly-text">{{details}}</text>
        </view>
      </view>
      
      <view class="dialog-actions">
        <button 
          class="action-btn cancel-btn elderly-pressable" 
          @tap="handleCancel"
          :disabled="loading"
        >
          <text class="btn-text elderly-text">{{cancelText}}</text>
        </button>
        <button 
          class="action-btn confirm-btn elderly-pressable" 
          :class="{ loading: loading }"
          @tap="handleConfirm"
          :disabled="loading"
        >
          <text class="btn-text elderly-text">{{loading ? '处理中...' : confirmText}}</text>
        </button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'ConfirmDialog',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: '确认操作'
    },
    message: {
      type: String,
      default: '确定要执行此操作吗？'
    },
    details: {
      type: String,
      default: ''
    },
    confirmText: {
      type: String,
      default: '确认'
    },
    cancelText: {
      type: String,
      default: '取消'
    },
    loading: {
      type: Boolean,
      default: false
    },
    type: {
      type: String,
      default: 'warning', // warning, danger, info, success
      validator: value => ['warning', 'danger', 'info', 'success'].includes(value)
    }
  },
  methods: {
    handleConfirm() {
      if (this.loading) return
      
      // 触觉反馈
      if (uni.vibrateShort) {
        try { uni.vibrateShort({ type: 'medium' }) } catch(e){}
      }
      
      this.$emit('confirm')
    },
    
    handleCancel() {
      if (this.loading) return
      
      // 触觉反馈
      if (uni.vibrateShort) {
        try { uni.vibrateShort({ type: 'light' }) } catch(e){}
      }
      
      this.$emit('cancel')
    },
    
    handleBackdropTap() {
      if (this.loading) return
      this.handleCancel()
    }
  }
}
</script>

<style scoped>
.confirm-dialog {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: $elderly-spacing-lg;
}

.dialog-content {
  width: 100%;
  max-width: 600rpx;
  background: $elderly-bg-primary;
  border-radius: $elderly-radius-lg;
  box-shadow: $elderly-shadow-lg;
  border: 2rpx solid $elderly-border;
  overflow: hidden;
}

.dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: $elderly-spacing-lg;
  border-bottom: 2rpx solid $elderly-border;
  background: $elderly-bg-secondary;
}

.dialog-title {
  color: $elderly-text-primary;
  font-weight: 700;
}

.dialog-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: $elderly-touch-sm;
  height: $elderly-touch-sm;
  background: $elderly-bg-primary;
  border-radius: 50%;
  border: 2rpx solid $elderly-border;
}

.close-icon {
  font-size: $elderly-font-lg;
  color: $elderly-text-secondary;
  font-weight: bold;
}

.dialog-body {
  padding: $elderly-spacing-lg;
}

.dialog-message {
  color: $elderly-text-primary;
  line-height: 1.6;
  margin-bottom: $elderly-spacing-sm;
}

.dialog-details {
  background: $elderly-bg-secondary;
  border-radius: $elderly-radius-base;
  padding: $elderly-spacing-sm;
  border: 2rpx solid $elderly-border;
}

.details-text {
  color: $elderly-text-secondary;
  font-size: $elderly-font-sm;
  line-height: 1.5;
}

.dialog-actions {
  display: flex;
  gap: $elderly-spacing-sm;
  padding: $elderly-spacing-lg;
  background: $elderly-bg-secondary;
}

.action-btn {
  flex: 1;
  min-height: $elderly-touch-lg;
  border-radius: $elderly-radius-base;
  border: 2rpx solid $elderly-border;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: $elderly-font-base;
  font-weight: 600;
  transition: all 0.2s ease;
}

.cancel-btn {
  background: $elderly-bg-primary;
  color: $elderly-text-primary;
}

.cancel-btn:active {
  background: $elderly-bg-secondary;
}

.confirm-btn {
  background: linear-gradient(135deg, $theme-orange, $theme-yellow);
  color: #fff;
  border-color: transparent;
}

.confirm-btn:active {
  transform: scale(0.98);
}

.confirm-btn.loading {
  opacity: 0.7;
  pointer-events: none;
}

.btn-text {
  font-weight: 600;
}

/* 不同类型的样式 */
.dialog-content[data-type="danger"] .confirm-btn {
  background: linear-gradient(135deg, #ff4757, #ff6b6b);
}

.dialog-content[data-type="success"] .confirm-btn {
  background: linear-gradient(135deg, #2ed573, #7bed9f);
}

.dialog-content[data-type="info"] .confirm-btn {
  background: linear-gradient(135deg, $theme-blue, #74b9ff);
}
</style>
